ExtJS অ্যাপ্লিকেশন শুরু করার জন্য কিছু বেসিক কনফিগারেশন প্রয়োজন। এই কনফিগারেশনগুলি অ্যাপ্লিকেশন স্ট্রাকচার তৈরি, ডেটা ম্যানেজমেন্ট, UI উপাদান এবং কার্যকারিতা সঠিকভাবে সেটআপ করার জন্য অপরিহার্য।

বেসিক কনফিগারেশনের প্রধান ধাপ

অ্যাপ্লিকেশন এন্ট্রি পয়েন্ট: app.js

app.js হলো ExtJS অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট। এটি অ্যাপ্লিকেশনের নাম, স্টার্টআপ ভিউ, এবং অন্যান্য সেটআপ কনফিগার করে।

উদাহরণ:

Ext.application({
    name: 'MyApp', // অ্যাপ্লিকেশনের নাম
    launch: function() {
        // অ্যাপ্লিকেশন চালু হলে প্রথমে যে কোড রান করবে
        Ext.create('MyApp.view.Main', {
            renderTo: Ext.getBody() // HTML ডকুমেন্টে রেন্ডার করার টার্গেট
        });
    }
});

অ্যাপ্লিকেশন কাঠামো

ExtJS অ্যাপ্লিকেশনে সাধারণত MVC (Model-View-Controller) প্যাটার্ন ব্যবহৃত হয়। প্রধান ফোল্ডারসমূহ হলো:

• model/: ডেটা মডেলের জন্য।
• view/: UI কম্পোনেন্টের জন্য।
• controller/: ইভেন্ট এবং লজিকের জন্য।
• store/: ডেটা সংগ্রহ ও ম্যানেজমেন্টের জন্য।

উদাহরণ: অ্যাপ্লিকেশন ফোল্ডার কাঠামো

/app
├── model/
├── view/
├── controller/
├── store/
├── Application.js

অ্যাপ্লিকেশনের Application.js

Application.js ফাইলটি ExtJS অ্যাপ্লিকেশনের কনফিগারেশন এবং লোডিং মেকানিজম নিয়ন্ত্রণ করে।

উদাহরণ:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',
    controllers: ['MainController'], // অ্যাপ্লিকেশনে ব্যবহৃত কন্ট্রোলার

    launch: function () {
        console.log('Application Launched');
    }
});

কম্পোনেন্ট কনফিগারেশন

একটি সাধারণ প্যানেল তৈরি করা

ExtJS এর প্যানেল একটি মৌলিক কম্পোনেন্ট, যা UI তৈরি করতে ব্যবহার করা হয়।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'My Panel', // প্যানেলের শিরোনাম
    width: 400,        // প্রস্থ
    height: 300,       // উচ্চতা
    html: '<p>Welcome to ExtJS!</p>', // প্যানেলের HTML কন্টেন্ট
    renderTo: Ext.getBody() // যেখানে এটি রেন্ডার হবে
});

ফর্ম প্যানেল তৈরি করা

উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Login Form',
    width: 300,
    bodyPadding: 10,
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false
        }
    ],
    buttons: [
        {
            text: 'Login',
            handler: function() {
                alert('Login clicked!');
            }
        }
    ],
    renderTo: Ext.getBody()
});

ডেটা ম্যানেজমেন্ট কনফিগারেশন

মডেল তৈরি করা

উদাহরণ:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' }
    ]
});

স্টোর তৈরি করা

উদাহরণ:

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    proxy: {
        type: 'ajax',
        url: '/users',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    autoLoad: true
});

গ্রিড প্যানেল তৈরি করা

উদাহরণ:

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    store: {
        type: 'Users' // স্টোরের রেফারেন্স
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ],
    renderTo: Ext.getBody()
});

গুরুত্বপূর্ণ কনফিগারেশন সেটিংস

1. name: অ্যাপ্লিকেশনের নাম।
2. launch: অ্যাপ্লিকেশন শুরু হলে প্রথমে যেটি চালু হবে।
3. controllers: অ্যাপ্লিকেশনে ব্যবহৃত কন্ট্রোলার লিস্ট।
4. autoLoad: ডেটা স্টোর স্বয়ংক্রিয়ভাবে লোড হবে কিনা।
5. renderTo: HTML ডম এলিমেন্ট যেখানে কম্পোনেন্ট রেন্ডার হবে।

বেসিক কনফিগারেশন ব্যবহার করে কীভাবে উপকৃত হবেন

• সহজে স্ট্রাকচারড এবং মডুলার অ্যাপ্লিকেশন তৈরি করা যায়।
• ডেটা ম্যানেজমেন্ট এবং UI একীভূত করা সহজ হয়।
• জটিল ইন্টারফেস তৈরির সময় সময় এবং প্রচেষ্টা সাশ্রয় হয়।

এই বেসিক কনফিগারেশনের মাধ্যমে আপনি ExtJS অ্যাপ্লিকেশন তৈরি শুরু করতে পারবেন এবং ভবিষ্যতে এটি সহজে স্কেল করা সম্ভব হবে।

ExtJS অ্যাপ্লিকেশনের জন্য Ext.application একটি এন্ট্রি পয়েন্ট, যা অ্যাপ্লিকেশনের পুরো স্ট্রাকচার এবং কনফিগারেশন পরিচালনা করে। এটি অ্যাপ্লিকেশনের Application ক্লাস লোড এবং সেটআপ করার জন্য ব্যবহৃত হয়।

Application Class

ExtJS এর Application ক্লাস অ্যাপ্লিকেশনের কেন্দ্রীয় ম্যানেজার হিসেবে কাজ করে। এটি বিভিন্ন কনফিগারেশন, কন্ট্রোলার, ভিউ, এবং স্টোর পরিচালনা করে। সাধারণত এই ক্লাসটি /app/Application.js ফাইলের মধ্যে থাকে।

Application.js এর উদাহরণ:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application', // Application ক্লাসটি প্রসারিত করা
    name: 'MyApp',                // অ্যাপ্লিকেশনের নাম

    controllers: [
        'MainController'          // কন্ট্রোলার লিস্ট
    ],

    launch: function () {
        console.log('Application Launched'); // অ্যাপ্লিকেশন চালু হওয়ার পর প্রথমে যা হবে
    }
});

Application Class এর প্রধান বৈশিষ্ট্য

• extend: Ext.app.Application থেকে প্রসারিত।
• name: অ্যাপ্লিকেশনের নাম।
• launch: অ্যাপ্লিকেশন চালু হলে প্রথমে যা সম্পন্ন হবে।
• controllers: অ্যাপ্লিকেশনে ব্যবহৃত কন্ট্রোলার লিস্ট।
• stores: ডেটা স্টোর লোড করার জন্য ব্যবহৃত।

Ext.application কনফিগারেশন

Ext.application হল ExtJS অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট, যা অ্যাপ্লিকেশন চালু করার জন্য প্রয়োজনীয় সেটআপ সম্পন্ন করে। এটি সাধারণত app.js ফাইলের মধ্যে ব্যবহৃত হয়।

উদাহরণ:

Ext.application({
    name: 'MyApp', // অ্যাপ্লিকেশনের নাম

    requires: [
        'MyApp.view.Main' // অ্যাপ্লিকেশন চালু করার জন্য প্রয়োজনীয় ক্লাস
    ],

    launch: function () {
        // অ্যাপ্লিকেশন চালু হওয়ার পর সম্পন্ন হওয়া কাজ
        Ext.create('MyApp.view.Main', {
            renderTo: Ext.getBody() // অ্যাপ্লিকেশনকে রেন্ডার করার এলিমেন্ট
        });
    }
});

Ext.application এর প্রধান কনফিগারেশন

1. name
   • অ্যাপ্লিকেশনের নাম, যা ExtJS এর নেমস্পেস হিসেবে ব্যবহৃত হয়।

   • উদাহরণ:

     name: 'MyApp'
     

2. requires
   • অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ক্লাস লোড করার লিস্ট।

   • উদাহরণ:

     requires: ['MyApp.view.Main']
     

3. launch
   • অ্যাপ্লিকেশন লোড হওয়ার পর যেটি প্রথমে চালু হবে।

   • উদাহরণ:

     launch: function() {
         console.log('Application Started');
     }
     

4. controllers
   • কন্ট্রোলার লিস্ট, যা অ্যাপ্লিকেশনে ব্যবহৃত হয়।

   • উদাহরণ:

     controllers: ['MainController']
     

5. autoCreateViewport (পুরনো সংস্করণে)
   • স্বয়ংক্রিয়ভাবে ভিউপোর্ট তৈরি করে।
   • launch কনফিগারেশনের মাধ্যমে এটি প্রতিস্থাপিত হয়েছে।
6. appFolder
   • অ্যাপ্লিকেশনের মূল ফোল্ডারের পথ।
   • ডিফল্ট: app/

   • উদাহরণ:

     appFolder: 'src/app'
     

Application Class এবং Ext.application এর সম্পর্ক

• Ext.application অ্যাপ্লিকেশন চালু করার জন্য Application ক্লাসকে লোড করে।
• Application ক্লাসে অ্যাপ্লিকেশনের বিভিন্ন কনফিগারেশন এবং লজিক থাকে।
• Ext.application এর মাধ্যমে অ্যাপ্লিকেশনের প্রথম ভিউ বা প্যানেল তৈরি এবং দেখানো হয়।

একটি উদাহরণ প্রজেক্ট

app/Application.js:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',

    launch: function () {
        console.log('Application Initialized');
    }
});

app/view/Main.js:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Main Panel',
    html: 'Welcome to ExtJS!',
    renderTo: Ext.getBody()
});

app.js:

Ext.application({
    name: 'MyApp',
    requires: ['MyApp.view.Main'],
    launch: function () {
        Ext.create('MyApp.view.Main');
    }
});

সারসংক্ষেপ

1. Application Class:
   • অ্যাপ্লিকেশনের কেন্দ্রীয় ম্যানেজার।
   • কন্ট্রোলার, স্টোর এবং লজিক পরিচালনা করে।
2. Ext.application:
   • অ্যাপ্লিকেশন চালু করার এন্ট্রি পয়েন্ট।
   • অ্যাপ্লিকেশনের প্রথম ভিউ তৈরি এবং রেন্ডার করে।

এই দুটি উপাদান ExtJS অ্যাপ্লিকেশন তৈরি এবং পরিচালনার ভিত্তি গঠন করে।

ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা MVC (Model-View-Controller) আর্কিটেকচার অনুসরণ করে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টে কোডের মডুলারিটি এবং রক্ষণাবেক্ষণ সহজ করে। MVC আর্কিটেকচার অ্যাপ্লিকেশনের মডেল, ভিউ এবং কন্ট্রোলারকে পৃথকভাবে পরিচালনা করার জন্য ব্যবহৃত হয়, যা কোডের পুনঃব্যবহারযোগ্যতা এবং স্কেলেবিলিটি বৃদ্ধি করে।

MVC আর্কিটেকচারের ভূমিকা

1. Model (মডেল)
   • ডেটা এবং ডেটার লজিক নিয়ন্ত্রণ করে।
   • ডেটা ফিল্ড, ভ্যালিডেশন, ডেটা ফেচিং, এবং আপডেটের কাজ করে।
2. View (ভিউ)
   • ইউজার ইন্টারফেস উপস্থাপন করে।
   • ডেটাকে ভিজ্যুয়ালাইজ করার জন্য UI কম্পোনেন্ট ব্যবহার করে।
3. Controller (কন্ট্রোলার)
   • ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটায়।
   • ইউজার ইন্টারঅ্যাকশনের উপর ভিত্তি করে অ্যাপ্লিকেশন লজিক পরিচালনা করে।

MVC আর্কিটেকচার ব্যবহার করার জন্য ExtJS কনফিগারেশন

ExtJS প্রজেক্টে MVC আর্কিটেকচার ব্যবহার করতে, আমাদের তিনটি প্রধান অংশ তৈরি করতে হবে:

1. Model (মডেল)
2. View (ভিউ)
3. Controller (কন্ট্রোলার)

১. Model (মডেল)

মডেল হলো অ্যাপ্লিকেশনের ডেটা এবং তার লজিকের প্রতিনিধিত্ব। মডেলে ডেটার গঠন এবং বৈশিষ্ট্য সংজ্ঞায়িত করা হয়।

মডেল উদাহরণ:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' }
    ]
});

• extend: Ext.data.Model ক্লাস থেকে এটি প্রসারিত হয়।
• fields: মডেলের ডেটা ফিল্ডসমূহ।

২. View (ভিউ)

ভিউ অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) উপস্থাপন করে। এটি গ্রিড, ফর্ম, প্যানেল, ট্যাব ইত্যাদি UI কম্পোনেন্টের মাধ্যমে ডেটা দেখায়।

ভিউ উদাহরণ:

Ext.define('MyApp.view.UserGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usergrid', // ভিউটিকে এক্সটিআইপি ব্যবহার করে রেফারেন্স করা
    title: 'User List',
    store: {
        model: 'MyApp.model.User',
        autoLoad: true
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ]
});

• xtype: এক্সটিআইপি ব্যবহার করে ভিউকে রেফারেন্স করা হয়।
• store: ডেটা স্টোর যা মডেলের মাধ্যমে ডেটা লোড এবং ম্যানেজ করে।
• columns: গ্রিডের কলামগুলি সংজ্ঞায়িত করা হয়।

৩. Controller (কন্ট্রোলার)

কন্ট্রোলার হলো লজিক্যাল অংশ যা ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটায়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন বা অন্যান্য ইভেন্টগুলির উপর ভিত্তি করে অ্যাপ্লিকেশনের লজিক পরিচালনা করে।

কন্ট্রোলার উদাহরণ:

Ext.define('MyApp.controller.UserController', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'usergrid': {
                itemclick: this.onUserClick
            }
        });
    },

    onUserClick: function(grid, record) {
        Ext.Msg.alert('User Selected', 'Name: ' + record.get('name'));
    }
});

• init: কন্ট্রোলার ইনিশিয়ালাইজ হওয়ার পর এই মেথডটি কল হয়।
• control: ভিউতে ইভেন্ট হ্যান্ডলিং সুনির্দিষ্ট করে (যেমন, itemclick ইভেন্ট)।
• onUserClick: গ্রিডের একটি আইটেমে ক্লিক করার পর কল হওয়া মেথড।

MVC আর্কিটেকচার ব্যবহার করে অ্যাপ্লিকেশন তৈরি

এখন, আমরা একটি সাধারণ MVC অ্যাপ্লিকেশন তৈরি করব যেখানে একটি গ্রিড ভিউ থাকবে, যা ব্যবহারকারীদের তালিকা দেখাবে।

প্রজেক্টের ফাইল স্ট্রাকচার:

/app
├── model
│   └── User.js
├── view
│   └── UserGrid.js
├── controller
│   └── UserController.js
├── Application.js
└── app.js

app.js (অ্যাপ্লিকেশন এন্ট্রি পয়েন্ট)

Ext.application({
    name: 'MyApp',
    requires: ['MyApp.view.UserGrid', 'MyApp.model.User', 'MyApp.controller.UserController'],
    
    controllers: ['UserController'],

    launch: function () {
        Ext.create('MyApp.view.UserGrid', {
            renderTo: Ext.getBody()
        });
    }
});

• requires: যে ফাইলগুলি অ্যাপ্লিকেশনের জন্য প্রয়োজন, সেগুলি লোড করা হয়।
• controllers: কন্ট্রোলারের লিস্ট।

Application.js (অ্যাপ্লিকেশন কনফিগারেশন)

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',

    launch: function() {
        console.log('Application launched');
    }
});

সারাংশ

1. Model: ডেটার কাঠামো এবং ম্যানিপুলেশন।
2. View: ইউজার ইন্টারফেস (UI) উপস্থাপন।
3. Controller: ভিউ এবং মডেল এর মধ্যে সমন্বয় এবং লজিক পরিচালনা।

ExtJS এর MVC আর্কিটেকচার ডেভেলপারদের কোডকে সংগঠিত এবং স্কেলযোগ্য করে তোলে। এটি বড় ও জটিল অ্যাপ্লিকেশন তৈরি করার জন্য একটি আদর্শ প্যাটার্ন।

ExtJS একটি MVC (Model-View-Controller) আর্কিটেকচার অনুসরণ করে, যেখানে Controllers, Views, এবং Models একে অপরের সাথে কাজ করে অ্যাপ্লিকেশনের কার্যকারিতা এবং ইউজার ইন্টারফেস তৈরি করতে। এই প্রতিটি উপাদান (Controllers, Views, এবং Models) অ্যাপ্লিকেশনের পৃথক অংশ হিসেবে কাজ করে এবং অ্যাপ্লিকেশনকে মডুলার, স্কেলেবল এবং সহজে রক্ষণাবেক্ষণযোগ্য করে তোলে।

১. Model (মডেল)

Model অ্যাপ্লিকেশনের ডেটার কাঠামো এবং সেই ডেটার সাথে সম্পর্কিত লজিক সংরক্ষণ করে। এটি ডেটার ভ্যালিডেশন, ডেটা ফিল্ড, এবং ডেটা রিড বা রাইটের জন্য ব্যবহৃত হয়। মডেল সাধারণত সার্ভার থেকে ডেটা লোড, আপডেট এবং সংরক্ষণ করার জন্য স্টোর এবং প্রক্সির সাথে কাজ করে।

মডেলের মূল কাজ:

• ডেটার কাঠামো নির্ধারণ করা।
• ডেটার ভ্যালিডেশন এবং কনভার্সন পরিচালনা করা।
• ডেটা থেকে প্রয়োজনীয় মান গ্রহণ করা।

মডেল উদাহরণ:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' }
    ],
    validations: [
        { type: 'length', field: 'name', min: 3 }
    ]
});

এখানে, User মডেলটি একটি id, name, এবং email ফিল্ড ধারণ করছে, এবং name ফিল্ডের জন্য একটি ভ্যালিডেশন দেওয়া হয়েছে যা ৩টির কম দৈর্ঘ্যের নাম গ্রহণ করবে না।

২. View (ভিউ)

View অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) উপস্থাপন করে। এটি গ্রিড, ফর্ম, প্যানেল, ট্যাব ইত্যাদি UI কম্পোনেন্ট তৈরি করে, যা ব্যবহারকারীদের সঙ্গে ইন্টারঅ্যাকশন করার জন্য ব্যবহৃত হয়। ভিউয়ের প্রধান কাজ হলো ডেটাকে ভিজ্যুয়ালাইজ করা এবং তা ইউজারকে প্রদর্শন করা।

ভিউয়ের মূল কাজ:

• UI উপাদান তৈরি করা।
• ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য কম্পোনেন্ট প্রদর্শন করা।
• মডেল থেকে ডেটা গ্রহণ করে সেটি ইউজার ইন্টারফেসে প্রদর্শন করা।

ভিউ উদাহরণ:

Ext.define('MyApp.view.UserGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usergrid',
    title: 'User List',
    store: {
        model: 'MyApp.model.User',
        autoLoad: true
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ]
});

এখানে, UserGrid একটি গ্রিড প্যানেল, যা User মডেল ব্যবহার করে ডেটা প্রদর্শন করে। এখানে store কনফিগারেশন মডেলের সাথে যুক্ত এবং columns কম্পোনেন্টে ডেটা প্রদর্শিত হচ্ছে।

৩. Controller (কন্ট্রোলার)

Controller ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটানোর জন্য ব্যবহৃত হয়। এটি ইউজার ইন্টারঅ্যাকশনের ভিত্তিতে অ্যাপ্লিকেশনের লজিক পরিচালনা করে। কন্ট্রোলার ইউজারের ইভেন্ট (যেমন, ক্লিক, সাবমিট, হোভার) অনুযায়ী ভিউ এবং মডেলের মধ্যে যোগাযোগ স্থাপন করে।

কন্ট্রোলারের মূল কাজ:

• ইউজারের ইভেন্ট (যেমন ক্লিক, সাবমিট) হ্যান্ডল করা।
• মডেল থেকে ডেটা নিয়ে তা ভিউতে প্রদর্শন করা।
• ভিউ থেকে ইউজার ইন্টারঅ্যাকশন হ্যান্ডল করা এবং মডেল বা স্টোর আপডেট করা।

কন্ট্রোলার উদাহরণ:

Ext.define('MyApp.controller.UserController', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'usergrid': {
                itemclick: this.onUserClick
            }
        });
    },

    onUserClick: function(grid, record) {
        Ext.Msg.alert('User Selected', 'Name: ' + record.get('name'));
    }
});

এখানে, UserController কন্ট্রোলারটি usergrid ভিউতে itemclick ইভেন্ট হ্যান্ডল করছে। ইউজার যখন গ্রিডের একটি রেকর্ড ক্লিক করবে, তখন একটি আলার্ম বার্তা প্রদর্শিত হবে যার মধ্যে ক্লিক করা ইউজারের নাম থাকবে।

MVC আর্কিটেকচারে Controllers, Views, এবং Models এর কাজের সম্পর্ক

1. Model: ডেটার কাঠামো এবং ম্যানিপুলেশন করে। মডেল সাধারণত স্টোর বা প্রক্সির মাধ্যমে ডেটার সাথে ইন্টারঅ্যাক্ট করে।
2. View: UI তৈরি করে এবং মডেল থেকে ডেটা নিয়ে সেটি ব্যবহারকারীর কাছে প্রদর্শন করে। ভিউ কেবল ডেটা উপস্থাপন করে, কিন্তু কোনো লজিক থাকে না।
3. Controller: ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটায় এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে অ্যাপ্লিকেশনের লজিক পরিচালনা করে।

এই তিনটি উপাদান একসাথে কাজ করে ExtJS অ্যাপ্লিকেশন তৈরি করতে যা সহজেই মডুলার এবং রক্ষণাবেক্ষণযোগ্য। MVC আর্কিটেকচার ব্যবহার করে অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় কোড পরিষ্কার থাকে এবং ফিচার অ্যাড বা পরিবর্তন সহজ হয়।

ExtJS তে ডায়নামিক লোডিং এর মাধ্যমে আপনি অ্যাপ্লিকেশনের নির্দিষ্ট অংশগুলো (যেমন: ক্লাস বা কম্পোনেন্ট) প্রয়োজনে লোড করতে পারেন। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক, কারণ আপনি শুধুমাত্র যেগুলি প্রয়োজন, সেগুলি লোড করবেন।

ExtJS তে Ext.Loader এবং Ext.require দুটি প্রধান টুল যা ডায়নামিক লোডিং পরিচালনা করতে ব্যবহৃত হয়।

১. Ext.Loader

Ext.Loader ExtJS এর একটি বিল্ট-ইন স্ক্রিপ্ট লোডার যা ডায়নামিকভাবে ক্লাস এবং ফাইল লোড করতে সহায়ক। এটি ক্লাস লোড করার জন্য অ্যাপ্লিকেশন স্টার্টআপে ব্যবহৃত হয়, এবং এটি স্বয়ংক্রিয়ভাবে নির্ধারণ করে কোন ক্লাসগুলি লোড করতে হবে।

Ext.Loader এর ব্যবহার:

1. লেজি লোডিং সক্ষম করা:
   Ext.Loader এর মাধ্যমে আপনাকে প্রয়োজনীয় ক্লাসগুলোকে অন দ্য ফ্লাই লোড করতে হবে। প্রথমে লোডার কনফিগার করতে হবে।

Ext.Loader.setConfig({
    enabled: true, // লোডারকে সক্ষম করা
    paths: {
        'MyApp': 'app' // 'MyApp' নেমস্পেসের জন্য ফোল্ডার পাথ নির্ধারণ
    }
});

2. ক্লাস লোডিং:
   যখনই আপনি কোনো নির্দিষ্ট ক্লাস বা ফাইল ব্যবহার করতে চান, তখন Ext.Loader তার জন্য ক্লাসটিকে ডায়নামিকভাবে লোড করবে।

Ext.onReady(function() {
    // 'MyApp.model.User' ক্লাস লোড করার জন্য
    Ext.Loader.require('MyApp.model.User', function() {
        var user = Ext.create('MyApp.model.User', {
            id: 1,
            name: 'John Doe',
            email: 'john.doe@example.com'
        });
        console.log(user.get('name')); // 'John Doe'
    });
});

• Ext.Loader.setConfig: এটি লোডারের কনফিগারেশন সেট করে, যেমন লোডিং সক্ষম করা এবং ক্লাসের পাথ নির্ধারণ।
• Ext.Loader.require: এটি ডায়নামিকভাবে ক্লাস লোড করার জন্য ব্যবহৃত হয়।

২. Ext.require

Ext.require একটি সরল পদ্ধতি যা একটি বা একাধিক ক্লাস বা ফাইল লোড করার জন্য ব্যবহৃত হয়। এটি অ্যাপ্লিকেশন রেডি হওয়ার আগে নির্দিষ্ট ক্লাস বা ফাইল লোড করার জন্য ব্যবহার করা হয়। এটি ক্লাস লোড করার সাথে সাথে ডিপেনডেন্সি (অর্থাৎ, অন্যান্য ক্লাসগুলোর প্রয়োজনীয়তা) স্বয়ংক্রিয়ভাবে রেজলভ করে।

Ext.require এর ব্যবহার:

Ext.require([
    'MyApp.model.User', // মডেল ক্লাস
    'MyApp.view.UserGrid' // ভিউ ক্লাস
], function() {
    // ক্লাস লোড হওয়ার পর কোড চালানো হবে
    var grid = Ext.create('MyApp.view.UserGrid', {
        renderTo: Ext.getBody()
    });
});

এখানে, Ext.require একাধিক ক্লাসকে ডায়নামিকভাবে লোড করে এবং যখন সব ক্লাস লোড হয়ে যাবে, তখন একটি callback ফাংশন চালানো হবে।

Ext.Loader এবং Ext.require এর মধ্যে পার্থক্য

1. Ext.Loader:
   • ব্যবহার: এটি ক্লাস লোড করার জন্য গ্লোবাল কনফিগারেশন সেট করে এবং অ্যাপ্লিকেশনের শুরুতে লোডিং কনফিগারেশন নিয়ন্ত্রণ করে।
   • ফিচার: ডায়নামিক লোডিং এর জন্য পাথ কনফিগারেশন এবং নির্দিষ্ট ক্লাস লোড করা যায়।
2. Ext.require:
   • ব্যবহার: এটি নির্দিষ্ট ক্লাস লোড করার জন্য ফাংশন কল ব্যবহার করে, যেটি অন্যান্য ক্লাসের উপর নির্ভরশীল হতে পারে।
   • ফিচার: সিঙ্গল বা একাধিক ক্লাস লোড করার জন্য ব্যবহার করা হয় এবং callback ফাংশন দিয়ে নির্দিষ্ট কাজ করা যায়।

উদাহরণ: ডায়নামিক লোডিং

ধরা যাক, আমাদের একটি User মডেল এবং UserGrid ভিউ রয়েছে। আমরা এগুলি ডায়নামিকভাবে লোড করতে চাই।

মডেল (User.js):

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' }
    ]
});

ভিউ (UserGrid.js):

Ext.define('MyApp.view.UserGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usergrid',
    title: 'User List',
    store: {
        model: 'MyApp.model.User',
        autoLoad: true
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ]
});

অ্যাপ্লিকেশন (app.js):

Ext.application({
    name: 'MyApp',
    requires: ['MyApp.model.User', 'MyApp.view.UserGrid'],

    launch: function() {
        // ডায়নামিক লোডিং করার জন্য require ব্যবহার
        Ext.require([
            'MyApp.model.User',
            'MyApp.view.UserGrid'
        ], function() {
            Ext.create('MyApp.view.UserGrid', {
                renderTo: Ext.getBody()
            });
        });
    }
});

এখানে Ext.require ব্যবহার করে আমরা User মডেল এবং UserGrid ভিউ লোড করাচ্ছি। launch ফাংশনটি চলার সময়, যখন এই ক্লাসগুলি পুরোপুরি লোড হয়ে যাবে, তখন আমরা UserGrid ভিউটি রেন্ডার করবো।

সারাংশ

• Ext.Loader এবং Ext.require ব্যবহারের মাধ্যমে আপনি ডায়নামিক ক্লাস লোডিং করতে পারেন যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে এবং অ্যাপ্লিকেশনকে দ্রুত লোড করতে সাহায্য করে।
• Ext.Loader প্রধানত গ্লোবাল কনফিগারেশন সেট করার জন্য ব্যবহৃত হয়, যখন Ext.require নির্দিষ্ট ক্লাস বা ফাইল ডায়নামিকভাবে লোড করার জন্য ব্যবহৃত হয়।
• এগুলি ডেভেলপারদের অ্যাপ্লিকেশনকে আরও দক্ষ এবং স্কেলেবল করতে সাহায্য করে।